<template>
  <el-aside width="200px">
    <el-menu
      background-color="#304156"
      text-color="#fff"
      :default-openeds="['1']"
      :default-active="activeMenu"
      mode="vertical"
      @select="handleSelect"
      unique-opened="true"
    >
      <div class="title-list">
        <img src="" alt="">
        <h3>外卖商家中心</h3>
      </div>
      <!-- 后台首页 -->
      <el-menu-item index="Dashboard">
        <el-icon><HomeFilled /></el-icon>
        后台首页
      </el-menu-item>

      <!-- 订单管理 -->
      <el-menu-item index="OrderManagement">
        <el-icon><Document /></el-icon>
        订单管理
      </el-menu-item>

      <!-- 店铺管理 -->
      <el-menu-item index="shopManagement">
        <el-icon><Shop /></el-icon>
        店铺管理
      </el-menu-item>

      <!-- 商品管理 -->
      <el-sub-menu index="3">
        <template #title>
          <el-icon><Goods /></el-icon>
          商品管理
        </template>
        <el-menu-item index="GoodsList">
          <el-icon><Document /></el-icon>
          商品列表
        </el-menu-item>
        <el-menu-item index="GoodsAdd">
          <el-icon><Plus /></el-icon>
          商品添加
        </el-menu-item>
        <el-menu-item index="GoodsCategory">
          <el-icon><Menu /></el-icon>
          商品分类
        </el-menu-item>
      </el-sub-menu>

      <!-- 账号管理 -->
      <el-sub-menu index="4">
        <template #title>
          <el-icon><User /></el-icon>
          账号管理
        </template>
        <el-menu-item index="AccountList">
          <el-icon><User /></el-icon>
          账号列表
        </el-menu-item>
        <el-menu-item index="AccountAdd">
          <el-icon><Plus /></el-icon>
          账号添加
        </el-menu-item>
        <el-menu-item index="AccountRole">
          <el-icon><Setting /></el-icon>
          账号角色
        </el-menu-item>
      </el-sub-menu>

      <!-- 销售统计 -->
      <el-sub-menu index="5">
        <template #title>
          <el-icon><DataAnalysis /></el-icon>
          销售统计
        </template>
        <el-menu-item index="SalesStatistics">
          <el-icon><TrendCharts /></el-icon>
          商品统计
        </el-menu-item>
        <el-menu-item index="OrderStatistics">
          <el-icon><TrendCharts /></el-icon>
          订单统计
        </el-menu-item>
      </el-sub-menu>
    </el-menu>
  </el-aside>
</template>

<script setup>
import { ref } from 'vue';
import { useRouter, useRoute } from 'vue-router';
import { HomeFilled, Document, Goods, Plus, Menu, User, Setting, DataAnalysis, TrendCharts } from '@element-plus/icons-vue';

const router = useRouter();
const route = useRoute();
const activeMenu = ref(route.name || 'Dashboard'); // 默认激活菜单路径

const handleSelect = (key) => {
  try {
    console.log('尝试跳转的路由名称:', key); // 打印路由名称以便调试
    if (!router.hasRoute(key)) {
      console.error(`路由不存在：${key}`);
      window.alert(`路由不存在：${key}`);
      return;
    }

    activeMenu.value = key;
    router.push({ name: key }).catch((error) => {
      console.error(`路由跳转失败：${key}`, error);
      window.alert('抱歉，页面跳转失败，请检查网络连接或联系管理员。');
    });
  } catch (error) {
    console.error('导航错误:', error);
  }
};
</script>

<style scoped>
/* 调整菜单项的间距和样式 */
.el-menu {
  border-right: none;
  background-color: #304156; /* 深蓝色背景 */
  color: #ffffff; /* 默认白色文字 */
}

/* 调整菜单项的图标与文字间距 */
.el-menu-item {
  height: 40px;
  line-height: 40px;
  font-size: 14px;
  color: #ffffff; /* 默认白色文字 */
}

/* 选中状态 */
.el-menu-item.is-active {
  background-color: #409EFF;
  color: rgb(216, 159, 52); /* 高亮背景色 */
}

/* 子菜单项 */
.el-submenu .el-menu-item {
  padding-left: 40px; /* 子菜单缩进更明显 */
}

/* 为图标和文字添加样式 */
.el-menu-item i {
  margin-right: 5px; /* 调整图标与文字间距 */
}

/* 标题样式 */
.title-list {
  display: flex;
  align-items: center;
  height: 60px;
}
.title-list img {
  width: 40px;
  height: 40px;
  margin-right: 10px;
}
.title-list h3 {
  font-size: 18px;
  font-weight: bold;
  color: #ffffff; /* 默认白色文字 */
}
</style>
